<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>武器渲染测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #000;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 1px solid #333;
            background: #111;
        }
        .info {
            margin-top: 10px;
            padding: 10px;
            background: #222;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>武器渲染测试</h1>
    <canvas id="testCanvas" width="800" height="600"></canvas>
    <div class="info">
        <p>测试武器渲染修复效果</p>
        <p>飞刀应该正确朝向飞行方向</p>
        <p>环绕弹应该正确旋转</p>
    </div>

    <script src="js/utils.js"></script>
    <script src="js/sprite.js"></script>
    <script src="js/sprites.js"></script>
    <script src="js/pixelArt.js"></script>
    <script src="js/weapon.js"></script>
    <script>
        // 初始化精灵管理器
        window.spriteManager = new SpriteManager();
        window.pixelArtGenerator = new PixelArtGenerator();

        // 测试武器渲染
        async function testWeaponRendering() {
            const canvas = document.getElementById('testCanvas');
            const ctx = canvas.getContext('2d');
            
            // 加载测试图像
            const imageList = [
                { key: 'weapon_knife', src: 'assets/images/weapons/飞刀.png' },
                { key: 'weapon_fireball', src: window.pixelArtGenerator.generateWeaponEffect('fireball') },
                { key: 'weapon_orbital', src: window.pixelArtGenerator.generateWeaponEffect('orbital') }
            ];
            
            await window.spriteManager.loadImages(imageList);
            
            // 创建精灵
            window.spriteManager.createSprite('weapon_knife', 32, 32);
            window.spriteManager.createSprite('weapon_fireball', 32, 32);
            window.spriteManager.createSprite('weapon_orbital', 32, 32);
            
            // 创建测试弹丸
            const testProjectiles = [
                new Projectile(100, 100, 0, 5, 20, '#FFD700', 5000), // 向右的飞刀
                new Projectile(200, 100, Math.PI/4, 5, 20, '#FF4500', 5000), // 对角线的火球
                new Projectile(300, 100, Math.PI/2, 5, 20, '#32CD32', 5000) // 向下的环绕弹
            ];
            
            // 设置武器类型
            testProjectiles[0].weaponType = 'knife';
            testProjectiles[1].weaponType = 'fireball';
            testProjectiles[2].weaponType = 'orbital';
            testProjectiles[2].isOrbital = true;
            testProjectiles[2].orbitalAngle = 0;
            
            // 渲染循环
            function render() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制网格
                ctx.strokeStyle = '#333';
                ctx.lineWidth = 1;
                for (let i = 0; i < canvas.width; i += 50) {
                    ctx.beginPath();
                    ctx.moveTo(i, 0);
                    ctx.lineTo(i, canvas.height);
                    ctx.stroke();
                }
                for (let i = 0; i < canvas.height; i += 50) {
                    ctx.beginPath();
                    ctx.moveTo(0, i);
                    ctx.lineTo(canvas.width, i);
                    ctx.stroke();
                }
                
                // 渲染弹丸
                testProjectiles.forEach(projectile => {
                    projectile.render(ctx);
                });
                
                // 绘制说明文字
                ctx.fillStyle = '#fff';
                ctx.font = '16px Arial';
                ctx.fillText('飞刀 (向右)', 50, 50);
                ctx.fillText('火球 (对角线)', 150, 50);
                ctx.fillText('环绕弹 (向下)', 250, 50);
                
                requestAnimationFrame(render);
            }
            
            render();
        }
        
        // 启动测试
        testWeaponRendering().catch(console.error);
    </script>
</body>
</html> 